<template>
    <div class="collect">
        <!-- Add a static page for my favorite module -->
        <div class="collect-header">
            <div class="collect-title">
                <i class="el-icon-collection-tag" style="color: #ff6700;"></i>
                我的收藏
            </div>
        </div>
        <div class="content">
            <div class="goods-list" v-if="collectList.length > 0">
                <MyList :list="collectList" :more="false" :is_delete="true"></MyList>
            </div>
            <!-- 收藏列表为空的时候显示的内容 -->
            <div>
                <div class="empty" v-if="collectList.length == 0">
                    <h2>您的收藏还是空的！</h2>
                    <p>快去购物吧！</p>
                </div>
            </div>
            <!--  收藏列表为空的时候显示的内容END -->
        </div>
    </div>
</template>
<script>
    import MyList from '../components/MyList'
    export default {
        data() {
            return {
                userInfo: {}, // 用户信息
                collectList: [], // 收藏数据
            };
        },
        methods: {
            // 初始化用户信息
            initUserInfo() {
                let json_userInfo = localStorage.getItem('userInfo');
                let userInfo = JSON.parse(json_userInfo);
                if (json_userInfo == null) {
                    // 没有登录
                    this.errorNotify('没有登录','用户未登录');
                }
                else {
                    this.userInfo = userInfo;
                    this.getCollectData();
                }
            },

            // 获取收藏数据
            getCollectData() {
                this.$axios({
                    method: 'get',
                    async: true,
                    url: this.baseUrl + '/api/v1/user/collectData',
                    headers: {
                        'access-token': this.userInfo.token,
                        'telephone': this.userInfo.telephone
                    }
                }).then(response => {
                    let result = response.data;
                    this.collectList = result.data;

                }).catch(error => {
                    console.log(error.response)
                })
            },
            // 错误提示
            errorNotify(title, message) {
                const h = this.$createElement;
                this.$notify({
                    title: title,
                    type: "error",
                    duration: 2000,
                    message: h('i', {style: 'color: red'}, message)
                });
            },
        },
        activated() {
            this.initUserInfo();
        },
        components: {
            MyList
        }
    };
</script>
<style>
    .collect {
        background-color: #f5f5f5;
    }
    .collect .collect-header {
        height: 64px;
        background-color: #fff;
        border-bottom: 2px solid #ff6700;
    }
    .collect .collect-header .collect-title {
        width: 1225px;
        margin: 0 auto;
        height: 64px;
        line-height: 58px;
        font-size: 28px;
    }
    .collect .content {
        padding: 20px 0;
        width: 1225px;
        margin: 0 auto;
    }
    .collect .content .goods-list {
        margin-left: -13.7px;
        overflow: hidden;
    }
    /* 收藏列表为空的时候显示的内容CSS */
    .collect .collect-empty {
        width: 1225px;
        margin: 0 auto;
    }
    .collect .collect-empty .empty {
        height: 300px;
        padding: 0 0 130px 558px;
        margin: 65px 0 0;
        background: url(../assets/imgs/cart-empty.png) no-repeat 124px 0;
        color: #b0b0b0;
        overflow: hidden;
    }
    .collect .collect-empty .empty h2 {
        margin: 70px 0 15px;
        font-size: 36px;
    }
    .collect .collect-empty .empty p {
        margin: 0 0 20px;
        font-size: 20px;
    }
    /* 收藏列表为空的时候显示的内容CSS END */
</style>
